<template>
  <view class="address" :style="'background-color: #f7f7f7;color:#333333;'+'min-height:'+$xyfun.xysys().windowHeight+'px'">
    <block v-if="!isLoading">
      <view class="address-list" v-if="!isEmpty">
        <view class="item m-b-30 p-40" :style="'background-color: #ffffff;'" v-for="item in addressList" :key="item.id" @tap="select(item)">
          <view class="m-b-15 tb flex" >
            <text> {{item.realname}}</text>
            <text class="m-l-20">{{item.mobile}}</text>
          </view>
          <view>地址：{{item.address}}</view>
        </view>
      </view>
      <view v-else>
        <xy-empty text="暂无收货地址,请添加" />
      </view>
    </block>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyEmpty from '@/components/xy-empty';
export default {
  components: {
    xyEmpty,
  },
  data() {
    return {

      isLoading:true,
      isEmpty: true,
      addressList: [],
      currentPage: 1,
      lastPage: 1,
      loadStatus: 'loadmore',
    }
  },
  computed: {
    ...mapState(['common'])
  },
  async onLoad() {

    this.loadData();
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.addressList = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    async loadData(isReload = false){
      if(isReload){
        this.currentPage = 1;
        this.addressList = [];
      }
      this.$api.post({
        url: '/user_address/take_list',
        loadingTip:'加载中...',
        data: {
          page: this.currentPage,
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.isLoading = false;
          this.addressList = [...this.addressList, ...res.data];
          this.isEmpty = !this.addressList.length;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
          this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';
        }
      });
    },


    select(item){
      this.$xyfun.prePage().pickTake(item);
      this.$xyfun.back();
    }


  }
}
</script>

<style scoped lang="scss">
.address-list{padding-bottom: 220rpx;}
</style>
